<template>
  <div class="box">
    <div v-if="isSuccess">
           <div class="font-bold text-3xl ml-[30px]">學生資料信息填寫!132</div>
    <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef" class="mt-7">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="學生名稱" prop="name"><el-input v-model="form.name" /></el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="手機號碼" prop="mobile"><el-input v-model="form.mobile" /></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="聯絡人" prop="contact">
            <el-button  class="button"  color="#F7B32B" type="primary" icon="Plus" @click="addPerson" >聯絡人</el-button>
            <div class="flex items-center">
            <div v-for="(value, index) in contact" :key="index" class="flex items-center ml-[10px]"><el-icon><User /></el-icon>{{value.name}}</div>
            </div>
          </el-form-item>
        </el-col>

         <el-col :span="8">
          <el-form-item label="登錄名" prop="username"><el-input v-model="form.username" /></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="密碼" prop="password" type="password"><el-input v-model="form.password" /></el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item label="電子郵箱" prop="email"><el-input v-model="form.email" /></el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="地址" prop="address"><el-input v-model="form.address" /></el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item label="英文名" prop="ename"><el-input v-model="form.ename" /></el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="來源" prop="source"><el-input v-model="form.source" /></el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="備註" prop="remark"><el-input v-model="form.remark" /></el-form-item>
        </el-col>
         <el-col :span="8">
          <el-form-item label="性別" prop="sex">
              <el-select  v-model="form.sex"  size="default" >
                <el-option v-for="item in sexOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="狀態" prop="status">
            <el-select  v-model="form.status"  size="default" >
              <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="调课次数" prop="num"><el-input v-model="form.num" /></el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="生日" prop="birthday">
                <el-date-picker  v-model="form.birthday" value-format="YYYY-MM-DD" type="date" placeholder="Pick a day"  size="default" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="身份證" prop="identity"><el-input v-model="form.identity" /></el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="學生類型" prop="student_type_id">
              <el-select  v-model="form.student_type_id"  size="default" >
                <el-option v-for="item in studentTypeList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学历" prop="education"><el-input v-model="form.education" /></el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="与学生关系" prop="relation"><el-input v-model="form.relation" /></el-form-item>
        </el-col>
           <el-col :span="8">
          <el-form-item label="卡號" prop="card_number"><el-input v-model="form.card_number" /></el-form-item>
        </el-col>

        <!-- <el-col :span="8"> -->

        <!-- </el-col> -->
      </el-row>
    </el-form>
          <div class="flex justify-start mt-[20px] ml-[20px] w-[100%]" >
            <el-button type="primary" @click="confirm(ruleFormRef,buttonType)" color="#081F42"
              >確定</el-button
            >
           </div>

    <fou-dialog :title="'新增聯絡人'" v-model:dialogValue="dialogValue" >
      <template #content>
                  <el-form  ref="formRef"  :model="dynamicValidateForm" >
            <el-button @click="addDomain"  color="#081F42">添加聯絡人</el-button>
             <div class="mt-[15px]">
                  <div class=" flex  justify-start">
                      <div v-for="(item,index) in dynamicValidateForm.domains" :key="index" class="w-[250px]  mr-10">
                              <el-form-item :prop="item.name"  > <el-input v-model="item.name" placeholder="聯絡人名稱(必填)" /></el-form-item>
                              <el-form-item :prop="item.relation" > <el-input v-model="item.relation" placeholder="與學生關係(必填)" /></el-form-item>
                              <el-form-item :prop="item.phone"> <el-input v-model="item.phone" placeholder="聯絡人聯絡電話(必填)" /></el-form-item>
                              <el-form-item :prop="item.homePhone" > <el-input v-model="item.homePhone" placeholder="住宅電話" /> </el-form-item>
                              <el-form-item :prop="item.address" > <el-input v-model="item.address" placeholder="地址" /> </el-form-item>
                              <el-button type="danger" v-if="index > 0" @click="delFamily(index)">刪除</el-button>
                      </div>
                  </div>
            </div>
      </el-form>
      </template>
      <template #footer>
                <el-button @click="dialogValue = false">取消</el-button>
          <el-button  @click="submitForm(formRef)"  color="#081F42">提交</el-button>
      </template>
    </fou-dialog>
    </div>
    <div v-if="isSuccess" class="font-bold text-3xl flex justify-center mt-[50px]">提交成功!</div>
  </div>
</template>

<script setup>
import { ref, reactive,onMounted, watch } from "vue";
import {message} from '@/common/function.js'
 import {studentType,addStudent,updateStudent} from '@/http/index.js'
const formRef = ref('')
let contact = ref([])
const submitForm = (formEl)=>{
  if (!formEl) return
  formEl.validate((valid)=>{
    if (valid) {
      dynamicValidateForm.domains.forEach(e=>{
        console.log(e);
        if (e.name == '') {
          message('請填寫姓名')
        }else
        if (e.relation == '') {
          message('請填寫與學生關係')
        }else
       if (e.phone == '') {
          message('請填寫聯繫電話')
        }else{
          contact.value = dynamicValidateForm.domains
          form.contact = JSON.stringify(dynamicValidateForm.domains)
          dialogValue.value = false
        }
      })
    }
  })
}
const addDomain = () => {
       if ( dynamicValidateForm.domains.length === 3) {
        return
      }
   dynamicValidateForm.domains.push({
          name: '',
          relation: '',
          phone: '',
          homePhone: '',
          address: '',
        })
}
const dynamicValidateForm = reactive({
  domains:[
    {
          name: '',//联系人名称(必填)
          relation: '',//与学生关系(必填)
          phone: '',//电话(必填)
          homePhone: '',//住宅电话
          address: '',//地址
    }
  ]
})
  const delFamily=(i)=> {
       dynamicValidateForm.domains.splice(i, 1);
    }

const ruleFormRef = ref('')
const form = reactive({
    school_id:localStorage.getItem('school_id'),
    name: "",
    mobile: "",
    username:'',
    password:'',
    email: "",
    address: "",
    ename: "",
    source:'',
    remark:'',
    sex: "",
    status: "",
    num:'',
    birthday:'',
    identity:'',
    student_type_id:'',
    education:'',
    relation:'',
    card_number:'',
    contact:'',
});
const rules = reactive({
  name: [{ required: true, message: "請輸入名字", trigger: ["blur",'change'] }],
  mobile: [{ required: true, message: "請輸入電話", trigger:  ["blur",'change']  }],
  username: [{ required: true, message: "請輸入登錄名", trigger:  ["blur",'change']  }],
  password: [{ required: true, message: "請輸入密碼", trigger:  ["blur",'change']  }],
  sex: [{ required: true, message: "請選擇性別", trigger:  ["blur",'change']  }],
  num: [{ required: true, message: "請輸入调课次数", trigger:  ["blur",'change']  }],
  student_type_id: [{ required: true, message: "請輸入學生類型", trigger:  ["blur",'change']  }],
  card_number: [{ required: true, message: "請輸入卡號", trigger:  ["blur",'change']  }],
  contact: [{ required: true, message: "請添加联系人", trigger:  ["blur",'change']  }],
});
const dialogValue = ref(false);
const addPerson = () => {
  dialogValue.value = true;
};
const sexOptions = [
  {
    value: '1',
    label: '男',
  },{
    value: '2',
    label: '女',
  }
]
const statusOptions = [
  {
    value: '1',
    label: '正常',
  },{
    value: '-1',
    label: '禁用',
  }
]
const isSuccess = ref(false)
const confirm = async (formEl,type) => {
  if (!formEl) return;
    formEl.validate(async (e)=>{
      if (e) {
        const data = await addStudent(form)
        if (data.code == 200) {
        message('添加學生成功')
        isSuccess.value = true
        }
      }
    })
};
defineExpose({
  // DialogCofirm,
});
const studentTypeList = ref([])
const studentTypes = async ()=>{
      let obj = {
        limit:100
      }
      const data = await studentType(obj)
      if (data.code == 200) {
        data.data.data.forEach(e=>{e.label = e.name,e.value=e.id})
        studentTypeList.value = data.data.data
      }else{
        message('獲取學生分類失敗')
      }
}

onMounted(() => {
  studentTypes()
})
</script>

<style lang='less'  scoped>
.button {
  color: #fff;
}
.box{
    padding: 20px;
}
</style>